<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .list{
            width: 400px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }

        .wrap{
            display: flex;
        }
        .wrap span{
            flex: 1;
            border: 1px solid;
        }
        .wrap button{
            flex: 1;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul class="list">
            <li class="wrap" v-for="(item,index) in arr" :key="index">
                <span>{{index}}:</span>
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
                <span>{{item.wife}}</span>
                <button @click="delFn(index)">del</button>
                <button @click="updateFn(index)">update</button>
                <button @click="lengthFn">update length</button>
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;

    new Vue({
        el:"#app",
        data:{
            //data中的数据是深度响应式!!!
            arr:[
                {
                    name:"达姆",
                    age:18,
                    wife:"冬雨"
                },
                {
                    name:"晓飞张",
                    age:48,
                    wife:"刘志远"
                },
                {
                    name:"张天宇",
                    age:38,
                    wife:"闫新宇"
                },
                {
                    name:"王思聪",
                    age:58,
                    wife:"王健林"
                }
            ]
        },
        methods:{
            //删除对应的回调函数
            delFn(index){
                //将index对应的arr中的数据删除掉
                //基本上vue内的回调函数的this指向都是vm实例对象
                //data中的数据又会转绑给vm实例对象

               /*
                   1. 数组api是干嘛的:
                            splice可以对数组进行CUD
                   2. 参数有哪些 分别代表什么意思:
                            start : 指定修改的开始位置(所有的区间都满足左闭右开规则)
                            deleteCount: 要从start开始删除几个元素
                            item1, item2, ... : 要添加进数组的元素,从start 位置开始
                   3. 返回值是什么
                            由被删除的元素组成的一个数组
                   4. 是否影响老数组
                            是
               */
                this.arr.splice(index,1)
            },
            //更新对应的回调函数
            updateFn(index){
                // this.arr[index].name="武"

                //使用vue中数组的变异方法
                this.arr.splice(index,1,{
                    name:"武",
                    age:66,
                    wife:"雨"
                })


                //数组的更新检测
                /*this.arr[index] = {
                    name:"武",
                    age:66,
                    wife:"雨"
                }*/
            },
            lengthFn(){
                this.arr.length = 100;
            }
        }
    })
</script>
</html>